<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>新型冠状病毒病例统计</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <style type="text/css">
        #customers
        {
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            width:100%;
            border-collapse:collapse;
        }

        #customers td, #customers th
        {
            font-size:1em;
            border:1px solid gray;
            padding:3px 7px 2px 7px;
        }

        #customers th
        {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color:gray;
            color:#ffffff;
        }

        #customers tr.alt td
        {
            color:#000000;
            background-color:#EAF2D3;
        }
    </style>
</head>
<body>
<h3 th:text="'全球新冠肺炎感染总人数：' + ${total}"/>
<h4 th:text="'相比前一天增加：' + ${pertotal}"/>
<form action="/search">
    <div>
        <input type="text" name="country" required="required" placeholder="输入需查找的国家/地区" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')">
        <button type="submit">查找</button>
    </div>
</form>
<br>
<table id="customers">
    <tr style="background-color: darkgray;">
        <td>州/省</td><td>国家/地区</td><td>病例总数</td><td>比前一天新增</td>
    </tr>
    <tr th:each="case:${allcases}">
        <td th:text="${case.getState()}"/>
        <td th:text="${case.getCountry()}"/>
        <td th:text="${case.getLatestTotalCases()}"/>
        <td th:text="${case.getDiffFromPrevDay()}"/>
    </tr>
</table>
</body>
</html>